<template>
  <div class="add container">
    <form v-on:submit.prevent="addCustomer">
      <div class="well">
        <div class="form-group">
          <label>姓名</label>
          <input
            type="text"
            class="form-control"
            placeholder="name"
            v-model="customer.name"
          />
        </div>
        <div class="form-group">
          <label>电话</label>
          <input
            type="text"
            class="form-control"
            placeholder="phone"
            v-model="customer.phone"
          />
        </div>
        <div class="form-group">
          <label>邮箱</label>
          <input
            type="email"
            class="form-control"
            placeholder="email"
            v-model="customer.email"
          />
        </div>
        <div class="form-group">
          <label>学历</label>
          <input
            type="text"
            class="form-control"
            placeholder="education"
            v-model="customer.education"
          />
        </div>
        <div class="form-group">
          <label>毕业学校</label>
          <input
            type="text"
            class="form-control"
            placeholder="graduationschool"
            v-model="customer.graduationschool"
          />
        </div>
        <div class="form-group">
          <label>职业</label>
          <input
            type="text"
            class="form-control"
            placeholder="profession"
            v-model="customer.profession"
          />
        </div>
        <div class="form-group">
          <label>个人简介</label>
          <textarea
            class="form-control"
            rows="10"
            v-model="customer.profile"
          ></textarea>
        </div>
        <button type="submit" class="btn btn-primary btn-block">添加</button>
      </div>
    </form>
  </div>
</template>

<script lang="ts">
import { ref, defineComponent, onMounted } from "vue";
import { useRouter } from "vue-router";
import axios from "axios";
import { Customer } from "@/utils/types.ts";

export default defineComponent({
  name: "add",
  setup() {
    const router = useRouter();

    const customer = ref<Customer>({
      name: "",
      phone: "",
      email: "",
      education: "",
      graduationschool: "",
      profession: "",
      profile: "",
    });

    // 表单提交事件
    const addCustomer = () => {
      const newCustomer = {
        name: customer.value.name,
        phone: customer.value.phone,
        email: customer.value.email,
        education: customer.value.education,
        graduationschool: customer.value.graduationschool,
        profession: customer.value.profession,
        profile: customer.value.profile,
      };
      axios.post("http://localhost:3000/users", newCustomer);
      // 跳转到首页
      // router.push("/");
      router.push({ path: "/", query: { alert: "用户信息添加成功！" } });
    };

    return { customer, addCustomer };
  },
});
</script>
